import type { SelectProps } from 'antd';
import { Checkbox, Select } from 'antd';
import type { CheckboxGroupProps } from 'antd/es/checkbox';
import { FC, useCallback, useMemo, useState } from 'react';
import { Item } from './data';
import { getStudyObjectDefaultAll, getStudyObjectList } from './utils';

interface StudyObjectSelectInterface
  extends FC<
    Pick<SelectProps<string, Item>, 'value' | 'onChange' | 'placeholder' | 'maxTagCount' | 'style'> & {
      optionsType?: number;
    }
  > {
  getDefaultAll(): string;
}

const StudyObjectSelect = function StudyObjectSelect({
  value,
  onChange,
  optionsType = 1,
  maxTagCount = 1,
  placeholder = '请选择',
}) {
  const _value = value ? value.split(',') : [];

  const [options] = useState(() => {
    return getStudyObjectList(optionsType);
  });
  const _options = useMemo(() => {
    return [{ label: '全部', value: 'all' }].concat(options);
  }, [options]);

  const isCheckAll = _value?.length === options.length;

  if (isCheckAll) {
    _value?.unshift('all');
  }

  return (
    <Select<string[], Item>
      value={_value}
      onSelect={(a, b) => {
        if (a === 'all') {
          // 选中全选
          onChange?.(
            options.map((v) => v.value).join(','),
            options.map((v) => ({ ...v })),
          );
        } else {
          // 加进去
          const nextValue = _value?.slice().filter((v) => v !== 'all') ?? [];
          nextValue.push(a);
          onChange?.(
            nextValue.join(','),
            options.filter((v) => nextValue?.includes(v.value)).map((v) => ({ ...v })),
          );
        }
        console.log('select', a, b);
      }}
      onDeselect={(a) => {
        console.log('onDeselect', a);

        if (a === 'all') {
          onChange?.('', []);
        } else {
          const nextValue = _value?.filter((v) => v !== a && v !== 'all') ?? [];
          onChange?.(
            nextValue?.join(','),
            options.filter((v) => nextValue.includes(v.value)).map((v) => ({ ...v })),
          );
        }
      }}
      showSearch={false}
      options={_options}
      placeholder={placeholder}
      mode="multiple"
      maxTagCount={maxTagCount}
      style={{ minWidth: 180 }}
    ></Select>
  );
} as StudyObjectSelectInterface;

StudyObjectSelect.getDefaultAll = getStudyObjectDefaultAll;

interface StudyObjectCheckBoxGroupPorps {
  optionsType?: number;
  value?: string;
  onChange?(value?: string): void;
}

const StudyObjectCheckBoxGroup = function ({ value, optionsType = 1, onChange }: StudyObjectCheckBoxGroupPorps) {
  const _value = value ? value.split(',') : [];
  const [options] = useState(() => {
    return getStudyObjectList(optionsType);
  });

  const _onChange = useCallback<NonNullable<CheckboxGroupProps['onChange']>>(
    (nextValue) => {
      onChange?.(nextValue.length ? nextValue.join(',') : undefined);
    },
    [onChange],
  );

  return (
    <Checkbox.Group value={_value} onChange={_onChange}>
      {options.map((v) => {
        return (
          <Checkbox key={v.value} value={v.value} style={{ marginBottom: '10px' }}>
            {v.label}
          </Checkbox>
        );
      })}
    </Checkbox.Group>
  );
};

export { StudyObjectSelect, getStudyObjectDefaultAll, StudyObjectCheckBoxGroup };
